<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background: #2d3a4b;">
      <div style="color:#fff;font-size:20px;text-align:center;padding:20px 0;">
        <el-icon><Shop /></el-icon>
        <span style="margin-left:8px;">管理系统</span>
      </div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#2d3a4b"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/dashboard">
          <el-icon><PieChart /></el-icon>
          <span>仪表盘</span>
        </el-menu-item>
        <el-menu-item index="/users">
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/products">
          <el-icon><Goods /></el-icon>
          <span>商品管理</span>
        </el-menu-item>
        <el-menu-item index="/orders">
          <el-icon><List /></el-icon>
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item index="/cart">
          <el-icon><ShoppingCart /></el-icon>
          <span>购物车管理</span>
        </el-menu-item>
        <el-menu-item index="/categories">
          <el-icon><Menu /></el-icon>
          <span>分类管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="background:#fff;display:flex;justify-content:space-between;align-items:center;">
        <div style="font-size:18px;">后台管理系统</div>
        <div>
          <el-avatar :size="32" icon="User" />
          <span style="margin-left:8px;">管理员</span>
        </div>
      </el-header>
      <el-main style="background:#f5f6fa;">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ElContainer, ElAside, ElHeader, ElMain, ElMenu, ElMenuItem, ElIcon, ElAvatar } from 'element-plus'
import { Shop, PieChart, User, Goods, List, Menu, ShoppingCart } from '@element-plus/icons-vue'
</script>

<style>
html, body, #app, .el-container {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f5f6fa;
}
.el-main {
  padding: 24px;
  background: transparent;
}
</style>
